<template>
	<view class="content">
		<view class="card">
			<view  style="margin-bottom: 20rpx;" @click="navSearch">
				<u-search placeholder="搜索视频内容" :showAction="false"></u-search>
			</view>
			<view class="card_title">
				自助专区
			</view>
			<view class="self-help">
				<image @click="goCompilationsPath" class="card-box1 card-box" src="../../static/card-box1.png" mode=""></image>
				<view class="">
					<!--  -->
					<image @click="fastIndex" class="card-box" src="../../static/card-box2.png" mode=""></image>
					<image @click="teamFast"  class="card-box" src="../../static/card-box3.png" mode=""></image>
				</view>	
			</view>
		</view>

		<view class="class-list" v-if="classList.length">
			<view class="class-item" v-for="item in classList" @click="buttonCount(item.id)">
				<image :src="item.pic" mode=""></image>
				<view class="">
					{{item.name}}
				</view>
				<button v-if="item.id" class="service"	open-type="contact" @contact="contactBtn"></button>
			</view>
		</view>
		<view   class="customization-box">
			<image v-if="customization.pic" :src="customization.pic" mode="widthFix"  @click="buttonCount(5)"></image>
			<button  class="service"	open-type="contact" @contact="contactBtn"></button>
		</view>
		
		
		<block v-if="true">
		<view class="">
			<u-tabs :list="tabsList" @click="clickTabs" lineColor="#FFCB71"></u-tabs>
		</view>
		<view class="flowList">
			<my-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="videoBox(item.id)">
						<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
						<image :showLoading="true" :src="'https://wjlm.goldsu.cn'+item.images" mode="widthFix"></image>
						<view class="demo-title">
							{{item.title}} 
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="videoBox(item.id)">
						<image :showLoading="true" :src="'https://wjlm.goldsu.cn'+item.images" mode="widthFix"></image>
						<view class="demo-title">
							{{item.title}}
						</view>
					</view>
				</template>
			</my-waterfall>
		</view>
		</block>
		<u-popup :show="show" mode="center" :safeAreaInsetBottom="false" round="16rpx">
			<view class="popup">
				<view class="text">
					努力开发中，很快见面
					<view class="">
						详情请咨询客服
					</view>
				</view>	
				<view class="btn">
					联系客服
					<button	open-type="contact" @contact="contactBtn"></button>
				</view>
			</view>
		</u-popup>
				<tqb-tabbar activeIndex="0" />
	</view>
</template>

<script>
	let type=''
	export default {
		data() {
			return {
				show: false,
				tabsList: [{
					name: '推荐',
					type:''
				}, {
					name: '项目',
					type:1
				}, {
					name: '活动',
					type:2
				}],
				flowList: [],
				list: [],
				btnList:[],
				classList:[],
				customization:{}
			}
		},
		onLoad() {
			this.addRandomData();
			this.$myRuquest('home/index/button_news').then(res=>{
				res.data.forEach(item=>{
					if(item.type==1){
						this.btnList.push(item)
					}else{
						this.customization=item
					}
				})
				if(this.btnList.length>5){
					this.classList=this.btnList.slice(0,4)
					this.classList.push({
						name:'更多',
						pic:'/static/more.png'
					})
				}else{
					this.classList=this.btnList
				}
			})
			
		},
onShareAppMessage (){},
		methods: {
			contactBtn(){
				this.show=false
			},
			navSearch(){
				uni.navigateTo({
					url:'./searchVideo/searchVideo'
				})
			},
			buttonCount(id){
				if(!id){
					if(this.classList.length>5){
						this.classList=this.btnList.slice(0,4)
						this.classList.push({
							name:'更多',
							pic:'/static/more.png'
						})
					}else{
						this.classList=this.btnList.slice()
						this.classList.push({
							name:'收起',
							pic:'/static/packUp.png'
						})
					}
					
				} else{
									// this.show=true
				if(!id)return;
				this.$myRuquest('home/index/button_count', {id})			
				}
				

			},
			goCompilationsPath(){
				uni.navigateTo({
					url:'./compilationsPath/compilationsPath'
				})
			},
			fastIndex(){
				uni.navigateTo({
					url:'./fastIndex/fastIndex'
				})
			},
			teamFast(){
				uni.navigateTo({
					url:'./teamFast/createTeamFast'
				})
			},
			clickTabs(e){
				console.log(e)
				type=e.type
				this.addRandomData()
			},
			videoBox(id){

				uni.navigateTo({
					url:'./videoBox/videoBox?id='+id
				})
			},
			addRandomData() {
				this.$refs.uWaterfall.clear();
				this.$myRuquest('home/index/new_activity_list',{type}).then(res=>{
						this.flowList=res.data;
				})
				// for (let i = 0; i < 10; i++) {
				// 	let index = this.$u.random(0, this.list.length - 1);
				// 	// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
				// 	let item = JSON.parse(JSON.stringify(this.list[index]))
				// 	item.id = this.$u.guid();
				// 	this.flowList.push(item);
				// }
			},
			clear() {
				this.$refs.uWaterfall.clear();
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #F5F5F5;
		padding: 20rpx;
	}
	.popup{
		border-radius: 16rpx;
		overflow: hidden;
		.text{
			padding:  40rpx 80rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			color: #333;
			view{
				font-size: 28rpx;
				color: #ccc;
				margin-top: 20rpx;
			}
		}
		.btn{
			position: relative;
			height: 80rpx;
			text-align: center;
			color: $theme-color;
			button{
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				opacity: 0;
			}

		}
	}

	.card {
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 12rpx;

		.card_title {
			font-size: 30rpx;
			font-weight: 700;
			margin-bottom: 20rpx;
		}

		.self-help {
			display: flex;
			justify-content: space-between;

			view,>image {
				width: 49% !important;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.card-box {
				width: 100%;
				height: 100rpx;
			}

			.card-box1 {
				height: 210rpx;
			}
		}

	}

	.class-list {
		display: flex;
		flex-wrap: wrap;
		background: #ffffff;
		margin: 20rpx 0;
		padding: 12rpx 0 0 0;
		border-radius: 20rpx;

		.class-item {
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 28rpx;
			color: #333333;
			margin-top: 8rpx;
			margin-bottom: 20rpx;
			position: relative;

			image {
				width: 102rpx;
				height: 102rpx;
				margin-bottom: 12rpx;
			}
		}
	}

	.customization-box {
		
		width: 100%;
		position: relative;
		image{
			width: 100%;
			border-radius: 12rpx;
		}
	}

	//
	.flowList{
		padding-bottom: 100rpx;
	}
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;

		image {
			width: 100%;
		}
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: #333333;
	}
	
	
	.service {
		background-color: #FFFFFF !important;
		border-radius: 0 !important;
		padding: 0 !important;
		font-size: 15px !important;
		line-height: 1.5em !important;
		text-align: left !important;
		
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.service::after {
		border: none;
	}
</style>
